<script setup>
import { useRouter } from 'vue-router'
import _api from '@/common/api/login'
import { ref } from 'vue';
import { ElNotification } from 'element-plus'
const form = ref({
    username: '',
    password: ''
})
const loading = ref(false)

const router = useRouter();

const ruleFormRef = ref(null)

const formRule = ref({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ]
})

const gopush = () => {
    console.log(111);
    router.push({ path: '/user' })
}

const submit = async () => {

    // 开始验证表单
    const valid = await ruleFormRef.value.validate();
    if (!valid) return;
    try {
        // 设置加载状态
        loading.value = true;
        // 登录操作
        const result = await _api.LoginAsync(form.value);
        if (result.code == 1) return ElNotification({
            message: result.msg,
            showClose: true,
            type: 'error',
        });
        sessionStorage.setItem('token', JSON.stringify(result.token));
        sessionStorage.setItem('user', JSON.stringify(result.data));
        // 成功通知
        ElNotification({
            message: result.msg,
            showClose: true,
            type: 'success',
        });
        router.push('/user')
    } finally {
        // 确保加载状态被重置
        loading.value = false;
    }
};

</script>

<template>
    <div class="container">
        <div class="login-box">
            <div class="login-left">
                <div class="svg-img"></div>
            </div>
            <div class="login-right">
                <h2>登录</h2>
                <div class="login-form">
                    <el-form ref="ruleFormRef" style="max-width: 600px" :model="form" :rules="formRule" label-width="auto"
                        class="demo-ruleForm">
                        <el-form-item prop="username">
                            <el-input v-model="form.username" clearable placeholder="请输入用户名" />
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input v-model="form.password" clearable placeholder="请输入密码" type="password"
                                @keyup.enter="submit" />
                        </el-form-item>
                        <el-button type="primary" @click="submit" :loading="loading">登录</el-button>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
    .login-box {
        display: flex;
        width: 1000px;
        height: 560px;
        border: 1px solid #ccc;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 0.5rem 1.2rem #999;
        border-radius: 10px;

        .login-left {
            flex: 1.2;
            background: linear-gradient(180deg, #51b0ff, #2878ff);
            border-radius: 10px 0 0 10px;

            .svg-img {
                width: 100%;
                height: 100%;
                background: url('../../assets/svg/svg02.svg') no-repeat;
                background-position: 1% 90%;
                background-size: 70%;
                transform: scale(0.8);
            }
        }

        .login-right {
            flex: 1;

            h2 {
                font-size: 2.5rem;
                font-weight: 600;
                text-align: center;
                margin-top: 120px;
            }

            .login-form {
                margin-top: 70px;
                padding: 0 40px;

                .el-button {
                    width: 100%;
                }
            }
        }
    }
}
</style>